<template>
  <div :style="{ ...coreStyle.marginSame(8) }">
    <a-card>
      <a-form ref="actProcessChartFormQueryRef" :model="actProcessChartFormQueryModel" labelAlign="left" layout="vertical" :style="{ ...coreStyle.marginBottom(10) }">
        <a-row :gutter="16" v-show="!actProcessChartFormQueryVisible">
          <a-col :span="8">
            <a-form-item :style="{ ...coreStyle.marginBottom(-8) }">
              <a-input-search v-model:value="actProcessChartFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessChartFormQuerySubmitting" @search="actProcessChartFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
            <a-button type="link" :style="{ ...coreStyle.floatRight }" @click="actProcessChartFormQueryUpDown">
              展开
              <CoreIcon icon="akar-icons:chevron-down" :size="14" />
            </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="16" v-show="actProcessChartFormQueryVisible">
          <a-col :span="8">
            <a-form-item>
              <a-input-search v-model:value="actProcessChartFormQueryModel.keySearchVo" placeholder="关键字搜索" :disabled="actProcessChartFormQuerySubmitting" @search="actProcessChartFormQuerySearch" />
            </a-form-item>
          </a-col>
          <a-col :span="16">
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程版本">
              <a-input-number v-model:value="actProcessChartFormQueryModel.processVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程图名称">
              <a-input v-model:value="actProcessChartFormQueryModel.processChartNameAndLike" placeholder="输入流程图名称" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="部署Id">
              <a-input v-model:value="actProcessChartFormQueryModel.deploymentIdAndLike" placeholder="输入部署Id" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程定义Id">
              <a-input v-model:value="actProcessChartFormQueryModel.processDefinitionIdAndLike" placeholder="输入流程定义Id" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="流程图内容">
              <a-input v-model:value="actProcessChartFormQueryModel.processChartContentAndLike" placeholder="输入流程图内容" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="外键Id">
              <a-input v-model:value="actProcessChartFormQueryModel.fkidAndLike" placeholder="输入外键Id" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-space :style="{ ...coreStyle.floatRight }">
              <a-button @click="actProcessChartFormQueryReset">
                <CoreIcon icon="ant-design:clear-outlined" :size="14" />
                重置
              </a-button>
              <a-button type="primary" ghost :loading="actProcessChartFormQuerySubmitting" @click="actProcessChartFormQuerySearch">
                <CoreIcon icon="ant-design:search-outlined" :size="14" />
                查询
              </a-button>
              <a-button type="link" @click="actProcessChartFormQueryUpDown">
                收起
                <CoreIcon icon="akar-icons:chevron-up" :size="14" />
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-space>
        <a-button type="primary" ghost @click="actProcessChartAdd">
          <CoreIcon icon="carbon:add-alt" :size="14" />
          新增
        </a-button>
        <a-button type="dashed" @click="actProcessChartUpdate" v-if="actProcessChartListSelectLength === 1">
          <CoreIcon icon="ri:brush-line" :size="14" />
          修改
        </a-button>
        <a-popconfirm title="确认删除？" placement="bottom" @confirm="actProcessChartDelete" v-if="actProcessChartListSelectLength > 0">
          <a-button type="dashed" danger>
            <CoreIcon icon="jam:delete" :size="14" />
            删除
          </a-button>
        </a-popconfirm>
        <a-button @click="actProcessChartDetailInfo" v-if="actProcessChartListSelectLength === 1">
          <CoreIcon icon="heroicons-outline:light-bulb" :size="14" />
          详情
        </a-button>
      </a-space>
      <a-space :style="{ ...coreStyle.floatRight }">
        <a-button type="link" shape="circle" @click="actProcessChartListGetDataSet">
          <CoreIcon icon="ci:refresh" :size="22" />
        </a-button>
      </a-space>
      <a-table
        rowKey="id"
        :columns="actProcessChartListColumns"
        :data-source="actProcessChartListDataSet"
        :loading="actProcessChartListLoading"
        :pagination="false"
        bordered
        :customRow="actProcessChartListCustomRow"
        :row-selection="{ fixed: true, selectedRowKeys: actProcessChartListSelectedRowKeys, onChange: actProcessChartListRowOnChange }"
        :scroll="{ x: '100%', y: 550 }"
        :style="{ ...coreStyle.marginTop(10) }"
      >
      </a-table>
      <a-pagination
        v-model:current="actProcessChartListDataPage"
        v-model:pageSize="actProcessChartListDataRows"
        :total="actProcessChartListDataCount"
        show-size-changer
        show-quick-jumper
        :page-size-options="[ ...coreStyle.antdPaginationPageSizeOptions ]"
        :show-total="(total, range) => coreStyle.antdPaginationShowTotal(total, range)"
        :style="{ ...coreStyle.marginTop(10), ...coreStyle.textAlignCenter }"
        @change="actProcessChartListPaginationChange"
        @showSizeChange="actProcessChartListPaginationShowSizeChange"
        v-if="actProcessChartListPaginationVisible"
      >
      </a-pagination>
      <p :style="{ ...coreStyle.marginTop(14), ...coreStyle.marginBottom(6), ...coreStyle.textAlignCenter }" v-if="!actProcessChartListPaginationVisible">
        {{ coreStyle.antdPaginationShowTotal(actProcessChartListDataCount) }}
      </p>
    </a-card>
    <a-drawer
      v-model:visible="actProcessChartEditDrawerVisible"
      title="编辑流程图信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
      @close="actProcessChartEditDrawerOnClose"
    >
      <a-form ref="actProcessChartFormRef" :model="actProcessChartFormModel" :rules="actProcessChartFormRules" labelAlign="left" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="流程版本" name="processVersions">
              <a-input-number v-model:value="actProcessChartFormModel.processVersions" :style="{ ...coreStyle.width('100%') }" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程图名称" name="processChartName">
              <a-input v-model:value="actProcessChartFormModel.processChartName" placeholder="输入流程图名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="部署Id" name="deploymentId">
              <a-input v-model:value="actProcessChartFormModel.deploymentId" placeholder="输入部署Id" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程定义Id" name="processDefinitionId">
              <a-input v-model:value="actProcessChartFormModel.processDefinitionId" placeholder="输入流程定义Id" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程图内容" name="processChartContent">
              <a-input v-model:value="actProcessChartFormModel.processChartContent" placeholder="输入流程图内容" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="外键Id" name="fkid">
              <a-input v-model:value="actProcessChartFormModel.fkid" placeholder="输入外键Id" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button @click="actProcessChartFormReset">
            <CoreIcon icon="ant-design:clear-outlined" :size="14" />
            重置
          </a-button>
          <a-button type="primary" ghost :loading="actProcessChartFormSaveSubmitting" @click="actProcessChartFormNextAdd">
            <CoreIcon icon="tabler:player-track-next" :size="14" />
            继续录入
          </a-button>
          <a-button type="primary" ghost :loading="actProcessChartFormSaveSubmitting" @click="actProcessChartFormSave">
            <CoreIcon icon="ant-design:save-outlined" :size="14" />
            保存
          </a-button>
        </a-space>
      </div>
    </a-drawer>
    <a-drawer
      v-model:visible="actProcessChartDetailDrawerVisible"
      title="流程图详细信息"
      placement="right"
      :closable="false"
      :width="'40%'"
      :header-style="{ ...coreStyle.antdDrawerHeader }"
      :body-style="{ ...coreStyle.margin(50, 0, 30, 0) }"
    >
      <a-space direction="vertical" :size="20" :style="{ ...coreStyle.width('100%') }">
        <a-descriptions title="基础信息" :column="2" bordered>
          <a-descriptions-item label="流程版本" :span="1">{{ actProcessChartDetailModel.processVersions }}</a-descriptions-item>
          <a-descriptions-item label="流程图名称" :span="1">{{ actProcessChartDetailModel.processChartName }}</a-descriptions-item>
          <a-descriptions-item label="部署Id" :span="1">{{ actProcessChartDetailModel.deploymentId }}</a-descriptions-item>
          <a-descriptions-item label="流程定义Id" :span="1">{{ actProcessChartDetailModel.processDefinitionId }}</a-descriptions-item>
          <a-descriptions-item label="流程图内容" :span="1">{{ actProcessChartDetailModel.processChartContent }}</a-descriptions-item>
          <a-descriptions-item label="外键Id" :span="1">{{ actProcessChartDetailModel.fkid }}</a-descriptions-item>
        </a-descriptions>
      </a-space>
      <div :style="{ ...coreStyle.antdDrawerFooter }">
        <a-space>
          <a-button type="dashed" @click="actProcessChartDetailUpdate">
            <CoreIcon icon="ri:brush-line" :size="14" />
            修改
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapStores } from 'pinia'
import { useCoreToolStore } from '/@/store/modules/cn/core/tool/coreToolStore'
import type { Res } from '/@/tool/Res'
import type { Param } from '/@/tool/Param'

import { useActProcessChartStore } from '/@/store/modules/cn/core/act/actProcessChartStore'

import type { ActProcessChart } from '/@/model/cn/core/act/eo/ActProcessChart'
import { toActProcessChart } from '/@/model/cn/core/act/eo/ActProcessChart'

import type { ActProcessChartQO } from '/@/model/cn/core/act/qo/ActProcessChartQO'
import { toActProcessChartQO } from '/@/model/cn/core/act/qo/ActProcessChartQO'

import type { ActProcessChartVO } from '/@/model/cn/core/act/vo/ActProcessChartVO'
import { toActProcessChartVO } from '/@/model/cn/core/act/vo/ActProcessChartVO'

@Options({
  name: 'ActProcessChart',
  components: {
  },
  computed: {
    ...mapStores(useCoreToolStore, useActProcessChartStore),
  },
})
export default class ActProcessChart extends Vue {

  actProcessChartListDataSet: Array<ActProcessChartVO> = []

  actProcessChartListColumns: Array<object> = [
    {
      title: '流程版本',
      dataIndex: 'processVersions',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '流程图名称',
      dataIndex: 'processChartName',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '部署Id',
      dataIndex: 'deploymentId',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '流程定义Id',
      dataIndex: 'processDefinitionId',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '流程图内容',
      dataIndex: 'processChartContent',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
    {
      title: '外键Id',
      dataIndex: 'fkid',
      align: 'center',
      // ellipsis: true,
      // width: 200,
    },
  ]

  actProcessChartListLoading: boolean = false

  actProcessChartListSelectedRowKeys: string[] = []

  actProcessChartListSelectData: Array<ActProcessChartVO> = []

  actProcessChartListSelectLength: number = 0

  actProcessChartListSelectCurrentRowIndex: number = -1

  actProcessChartListSelectCurrentRowData: ActProcessChartVO = toActProcessChartVO()

  actProcessChartListPaginationVisible: boolean = true

  actProcessChartListDataPage: number = 1

  actProcessChartListDataRows: number = 10

  actProcessChartListDataCount: number = 0

  actProcessChartListRowOnChange(selectedRowKeys, selectedRows) {
    this.actProcessChartListSelectedRowKeys = [ ...selectedRowKeys ]
    this.actProcessChartListSelectData = [ ...selectedRows ]
    this.actProcessChartListSelectLength = selectedRows.length
  }

  actProcessChartListCustomRow(record, index) {
    return {
      'class': index === this.actProcessChartListSelectCurrentRowIndex ? 'ant-table-row-selected' : '',
      onClick: (event) => {
        this.actProcessChartListSelectCurrentRowIndex = index
        this.actProcessChartListSelectCurrentRowData = { ...record }
        let selectedRowKeys = [ ...this.actProcessChartListSelectedRowKeys ]
        let selectedRows = [ ...this.actProcessChartListSelectData ]
        if (selectedRowKeys.includes(record.id)) {
          this.actProcessChartListRowOnChange([ ...selectedRowKeys.filter(eo => { return eo !== record.id }) ], [ ...selectedRows.filter(eo => { return eo.id !== record.id }) ])
        } else {
          selectedRowKeys.push(record.id)
          selectedRows.push(record)
          this.actProcessChartListRowOnChange([ ...new Set(selectedRowKeys) ], [ ...new Set(selectedRows) ])
        }
      },
      onDblclick: (event) => {
        this.actProcessChartStore.pkVo(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectCurrentRowData.id } as ActProcessChartQO)).then((res: Res<ActProcessChartVO>) => {
          if (res.succ) {
            this.actProcessChartDetailModel = { ...res.data[0] }
            this.actProcessChartDetailDrawerVisible = true
          } else {
            this.$message.error(res.msg, 6)
          }
        })
      },
    }
  }

  actProcessChartListGetDataSet() {
    this.actProcessChartListLoading = true
    this.actProcessChartListRowOnChange([], [])
    this.actProcessChartListSelectCurrentRowIndex = -1
    this.actProcessChartListSelectCurrentRowData = toActProcessChartVO()
    this.actProcessChartStore.pagingVo(this.$toParam<ActProcessChartQO>([], this.actProcessChartListDataPage, this.actProcessChartListDataRows)).then((res: Res<ActProcessChartVO>) => {
      if (res.succ) {
        this.actProcessChartListPaginationVisible = true
        this.actProcessChartListDataSet = [ ...res.data ]
        this.actProcessChartListDataCount = res.count
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessChartListLoading = false }, 500)
    })
  }

  actProcessChartListPaginationChange() {
    this.actProcessChartListGetDataSet()
  }

  actProcessChartListPaginationShowSizeChange() {
    this.actProcessChartListGetDataSet()
  }

  actProcessChartFormQueryVisible: boolean = false

  actProcessChartFormQuerySubmitting: boolean = false

  actProcessChartFormQueryModel: ActProcessChartQO = toActProcessChartQO()

  actProcessChartFormQueryUpDown() {
    this.actProcessChartFormQueryVisible = !this.actProcessChartFormQueryVisible
  }

  actProcessChartFormQueryReset() {
    if (this.$refs.actProcessChartFormQueryRef) {
      this.$refs.actProcessChartFormQueryRef.resetFields()
      this.actProcessChartFormQueryModel = toActProcessChartQO()
    }
  }

  actProcessChartFormQuerySearch() {
    this.actProcessChartFormQuerySubmitting = true
    this.actProcessChartListLoading = true
    this.actProcessChartListRowOnChange([], [])
    this.actProcessChartListSelectCurrentRowIndex = -1
    this.actProcessChartListSelectCurrentRowData = toActProcessChartVO()
    this.actProcessChartStore.queryVo(this.$toParam<ActProcessChartQO>(this.$toSearch({ ...this.actProcessChartFormQueryModel }))).then((res: Res<ActProcessChartVO>) => {
      if (res.succ) {
        this.actProcessChartListPaginationVisible = false
        this.actProcessChartListDataSet = [ ...res.data ]
        this.actProcessChartListDataCount = res.count
        setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      } else {
        this.$message.error(res.msg, 6)
        setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
        setTimeout(() => { this.actProcessChartListLoading = false }, 500)
      }
    }).catch(err => {
      setTimeout(() => { this.actProcessChartFormQuerySubmitting = false }, 5000)
      setTimeout(() => { this.actProcessChartListLoading = false }, 500)
    })
  }

  actProcessChartEditDrawerVisible: boolean = false

  actProcessChartFormSaveSubmitting: boolean = false

  actProcessChartFormSaveContinue: boolean = false

  actProcessChartFormModel: ActProcessChart = toActProcessChart()

  actProcessChartFormRules: object = {
    // processVersions: [
    //   { type: 'number', required: true, message: '流程版本不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processChartName: [
    //   { type: 'string', required: true, message: '流程图名称不能为空！', trigger: ['change', 'blur'] },
    // ],
    // deploymentId: [
    //   { type: 'string', required: true, message: '部署Id不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processDefinitionId: [
    //   { type: 'string', required: true, message: '流程定义Id不能为空！', trigger: ['change', 'blur'] },
    // ],
    // processChartContent: [
    //   { type: 'string', required: true, message: '流程图内容不能为空！', trigger: ['change', 'blur'] },
    // ],
    // fkid: [
    //   { type: 'string', required: true, message: '外键Id不能为空！', trigger: ['change', 'blur'] },
    // ],
  }

  actProcessChartFormReset() {
    if (this.$refs.actProcessChartFormRef) {
      this.$refs.actProcessChartFormRef.resetFields()
      this.actProcessChartFormModel = toActProcessChart()
    }
  }

  actProcessChartFormSubmit() {
    this.actProcessChartFormSaveSubmitting = true
    this.$refs.actProcessChartFormRef.validate().then(() => {
      if (this.actProcessChartFormModel.id) {
        this.actProcessChartStore.update(this.$toParam<ActProcessChart>(this.actProcessChartFormModel)).then((res: Res<ActProcessChart>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessChartFormReset()
            this.actProcessChartFormSaveSubmitting = false
            if (!this.actProcessChartFormSaveContinue) {
              this.actProcessChartEditDrawerVisible = false
              this.actProcessChartListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
        })
      } else {
        this.actProcessChartStore.save(this.$toParam<ActProcessChart>(this.actProcessChartFormModel)).then((res: Res<ActProcessChart>) => {
          if (res.succ) {
            this.$message.success(res.msg, 3)
            this.actProcessChartFormReset()
            this.actProcessChartFormSaveSubmitting = false
            if (!this.actProcessChartFormSaveContinue) {
              this.actProcessChartEditDrawerVisible = false
              this.actProcessChartListGetDataSet()
            }
          } else {
            this.$message.error(res.msg, 6)
            setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
          }
        }).catch(err => {
          setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
        })
      }
    }).catch(() => {
      setTimeout(() => { this.actProcessChartFormSaveSubmitting = false }, 3000)
    })
  }

  actProcessChartFormSave() {
    this.actProcessChartFormSaveContinue = false
    this.actProcessChartFormSubmit()
  }

  actProcessChartFormNextAdd() {
    this.actProcessChartFormSaveContinue = true
    this.actProcessChartFormSubmit()
  }

  actProcessChartAdd() {
    if (this.actProcessChartFormModel.id) {
      this.actProcessChartFormReset()
    }
    this.actProcessChartEditDrawerVisible = true
  }

  actProcessChartUpdate() {
    this.actProcessChartStore.pk(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectData[0].id } as ActProcessChartQO)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.actProcessChartFormReset()
        this.actProcessChartFormModel = { ...res.data[0] }
        this.actProcessChartEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartEditDrawerOnClose() {
    if (this.actProcessChartFormSaveContinue) {
      this.actProcessChartFormSaveContinue = false
      this.actProcessChartListGetDataSet()
    }
  }

  actProcessChartDelete() {
    let param: Array<ActProcessChart> = []
    this.actProcessChartListSelectData.forEach((eo: ActProcessChartVO) => {
      param.push({ id: eo.id } as ActProcessChart)
    })
    this.actProcessChartStore.removeBatch(this.$toParam<ActProcessChart>(param)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.$message.success(res.msg, 3)
        this.actProcessChartListGetDataSet()
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartDetailDrawerVisible: boolean = false

  actProcessChartDetailModel: ActProcessChartVO = toActProcessChartVO()

  actProcessChartDetailInfo() {
    this.actProcessChartStore.pkVo(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartListSelectData[0].id } as ActProcessChartQO)).then((res: Res<ActProcessChartVO>) => {
      if (res.succ) {
        this.actProcessChartDetailModel = { ...res.data[0] }
        this.actProcessChartDetailDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  actProcessChartDetailUpdate() {
    this.actProcessChartStore.pk(this.$toParam<ActProcessChartQO>({ id: this.actProcessChartDetailModel.id } as ActProcessChartQO)).then((res: Res<ActProcessChart>) => {
      if (res.succ) {
        this.actProcessChartFormReset()
        this.actProcessChartFormModel = { ...res.data[0] }
        this.actProcessChartDetailDrawerVisible = false
        this.actProcessChartEditDrawerVisible = true
      } else {
        this.$message.error(res.msg, 6)
      }
    })
  }

  mounted() {
    this.actProcessChartListGetDataSet()
  }

}
</script>

<style scoped lang="less">

</style>
